<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: qupen
  Date: 2016/11/15
  Time: 17:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="班次列表"/>
</jsp:include>
<link rel='stylesheet' href='/css/flatpickr.min.css'/>
<jsp:include page="../../include/tenant_header.jsp"/>

<jsp:include page="../../include/tenant_sidebar.jsp"/>
<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display: inline-block">班次列表</h4>
        <a id="setting" class="btn btn-add" href="javascript:;" style="margin-left:84px;">
            <i class="fa fa-plus" style="margin-right: 3px"></i>设置班次
        </a>
    </section>
    <section class="content">
        <div class="box box-primary table-header-line">
            <div id="show" class="box-body" style="padding: 0">

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group form-group-change">
                            <label class="col-md-4 sie-left-name">Status Type:</label>

                            <div class="col-md-8">
                                <select data-type="type" class="form-control sie-input-border sie-input-uwh"
                                        style="padding: 2px 5px;">
                                    <option value="1">Status Type 1</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-4 sie-left-name">名称:</label>

                            <div class="col-md-8">
                                <input data-name="name" class="form-control sie-input-border sie-input-uwh">
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-4 sie-left-name">Value:</label>

                            <div class="col-md-8" id="one" data-id="values">
                                <div style="margin-bottom:5px;" class="row_value">
                                    <input data-key="key" class="form-control sie-input-border sie-input-uwh" style="width: 50px;">
                                    <input data-value="value" class="form-control sie-input-border sie-input-uwh"style="width: 100px;vertical-align: top;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group form-group-change">
                            <label class="col-md-4 sie-left-name">Status Type:</label>

                            <div class="col-md-8">
                                <select data-type="type" class="form-control sie-input-border sie-input-uwh"
                                        style="padding: 2px 5px;">
                                    <option value="2">Status Type 2</option>
                                    <%--<option value="2">Status Type 2</option>--%>
                                </select>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-4 sie-left-name">名称:</label>

                            <div class="col-md-8">
                                <input data-name="name" class="form-control sie-input-border sie-input-uwh">
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-4 sie-left-name">Value:</label>

                            <div class="col-md-8" id="tow" data-id="values">
                                <div style="margin-bottom:5px;" class="row_value">
                                    <input data-key="key" class="form-control sie-input-border sie-input-uwh" style="width: 50px;">
                                    <input data-value="value" class="form-control sie-input-border sie-input-uwh" style="width: 100px;vertical-align: top;">
                                </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <%--</div>--%>
    </section>
</div>
<jsp:include page="../../include/foot.jsp"/>
<script src="/js/flatpickr.min.js"></script>
<script>
    $(document).ready(function () {
        $('#timepicker').flatpickr({
            enableTime: true,
            altInput: true,
            altFormat: "Y-m-j H:i:S"
        });
    });

    $(document).ready(function () {
        $("#setting").click(function () {
            $("#shift_setting").removeClass("hidden")
        });

        $('#start_time').datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            todayHighlight:true
        });

        $('#end_time').datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            todayHighlight:true
        });

        $("#addRow").click(function () {
            var $selectStart = $("<select></select>").addClass("form-control").attr("data-type", "start").append($("<option></option>"));
            var $selectEnd = $("<select></select>").addClass("form-control").attr("data-type", "end").append($("<option></option>"));
            for (var i = 0; i < 25; i++) {
                if (i < 10) {
                    $selectStart.append($("<option></option>").text("0" + i + ":00").attr("value", i));
                    $selectEnd.append($("<option></option>").text("0" + i + ":00").attr("value", i));
                } else {
                    $selectStart.append($("<option></option>").text(i + ":00").attr("value", i));
                    $selectEnd.append($("<option></option>").text(i + ":00").attr("value", i));
                }
            }
            var newInput = $("<tr></tr>").append(
                    $("<td></td>").addClass("table-body").attr("style", "width:50%").append($selectStart)).append(
                    $("<td></td>").addClass("table-body").attr("style", "width:50%").append($selectEnd)
            );

            var $tr = $("#tbody").find("tr:last");
            if ($tr.length > 0) {
                $tr.after(newInput);
            } else {
                $("#tbody").html(newInput);
            }
        });

        $("#cancel").click(function () {
            $('#start_time').val("");
            $('#end_time').val("");
            $("#tbody").html('');
            $("#shift_setting").addClass("hidden");

        });

        $("#create").click(function () {
            var bigArr = [];
            var isRight = true;
            var shiftArr = [];
            var trs = $("#tbody tr");
            $.each(trs, function (index, tr) {
                var tds = $(tr).find("td");
                var shift = {}, timeArr = [];
                $.each(tds, function (index, td) {
                    var $row = $(td);
                    var type = $row.children().data("type");
                    shift[type] = parseInt($row.children().find("option:selected").val());
                });
                shiftArr.push(shift);
                timeArr.push(shift.start);
                timeArr.push(shift.end);
                bigArr.push(timeArr);
            });
            bigArr.sort(function (x, y) {
                return x[0] - y[0];
            });

            for (var i = 0; i < bigArr.length; i++) {
                if (bigArr[i + 1]) {
                    if (bigArr[i][1] > bigArr[i + 1][0]) {
                        isRight = false;
                        alert("某一班次的开始时间不能小于上一班次的结束时间!");
                        break;
                    }
                }
                if (bigArr[i][0] > bigArr[i][1] || bigArr[i][0] == bigArr[i][1]) {
                    isRight = false;
                    alert("某一班次的开始时间应小于该班次的结束时间!");
                    break;
                }
            }
            if (isRight) {
                $.ajax({
                    url: "/partner/{tenant}/api/v1/shift/add".replace("{tenant}", getKeyByUrl()),
                    type: "post",
                    data: JSON.stringify({
                        deviceId: $("#deviceId").val(),
                        startDate: $('#start_time').val(),
                        endDate: $('#end_time').val(),
                        shift: shiftArr
                    }),
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        $('#start_time').val("");
                        $('#end_time').val("");
                        $("#tbody").html('');
                        $("#shift_setting").addClass("hidden");
                        $('#shift_list').DataTable().ajax.reload();
                    },
                    error: function (e) {
                        console.log(e);
                        swal("Error!", "", "error");
                    }
                });
            } else {
                return;
            }
        });
    });

    function showTime(_this) {
        var message = $(_this).data("time");
        $(_this).append($('<div class="message-box message-box-change"></div>').text(message).append($('<div class="triangle-border tb-border"></div><div class="triangle-border tb-background"></div>')));
    }

    function removeTime(_this) {
        $(_this).children().remove()
    }
</script>